<template>
  <div class="product">
    <div class="index-title">
      <h2>产品中心</h2>
      <p>Product Center</p>
    </div>
    <div class="product-type">
      <router-link :to="{path: '/product', query: {type: type, productType: 0}}"><img src="@/assets/img/product_01.png" alt=""></router-link>
      <router-link :to="{path: '/product', query: {type: type, productType: 1}}"><img src="@/assets/img/product_02.png" alt=""></router-link>
    </div>
    <div class="more">
      <router-link :to="{path: '/product'}">查看更多</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      type: {
        required: true,
        default: 0
      }
    }
  }
</script>

<style lang="less" scoped>
  .product {
    color: #fff;
    height: 5.82rem;
    padding: 0.18rem 0.25rem 0;
    background: url(../../assets/img/home.png) no-repeat;

    .product-type {
      display: flex;
      justify-content: space-between;

      a {
        display: block;
        width: 49%;

        img {
          display: block;
          width: 100%;
        }
      }
    }

    .index-title {
      text-align: center;
      margin-bottom: 0.3rem;

      h2 {
        line-height: 1.2;
      }

      p {
        font-size: 0.25rem;
        color: #616161;
      }
    }

    .more a {
      display: block;
      width: 1.63rem;
      height: 0.48rem;
      line-height: 0.48rem;
      text-align: center;
      margin: 0.36rem auto 0 auto;
      border: 1px solid #fff;
      color: #fff;
      font-size: 0.25rem;
    }
  }
</style>
